<template>
    <div class="channel-list">
        <Card style="padding:16px;">
            <Row class="search-form">
                <Col span="20">
                <Form :model="formItem" inline :label-width="100">
                    <FormItem label="员工名称：">
                        <Input v-model.trim="formItem.name"
                               clearable
                               placeholder="请输入"
                               :maxlength="20"
                               class="formItemStyle"
                        />
                    </FormItem>
                </Form>
                </Col>

                <Col span="4" style="text-align: right">
                <Button @click="channelSearch" class="tablePageBtnStyle" type="primary">查询</Button>
                </Col>
            </Row>


            <Row class="search-result">
                <Col span="0">

                </Col>
                <Col span="24" style="text-align: right">
                <Button @click="buildChannel" class="tablePageBtnStyle" type="primary">+新建员工</Button>
                </Col>
            </Row>

            <VTable :init='columns'
                    :defaultValue="defaultVal"
                    :pages='true'
                    :filt='filt'
                    @changed="tableCall"
                    :loading="loading"></VTable>


            <!-- 添加人员 -->
            <Modal v-model="distributionModal"
                   width="500"
                   title="添加人员"
                   :mask-closable="false">
                <div>
                    <Form ref="addPersonRef" :model="buildmodal"
                          :rules="ruleValidate" :label-width="130" class="channelBulid-form-back">
                        <FormItem label="员工名字" prop="name">
                            <Input v-model.trim="buildmodal.name" class="itemsStyle" placeholder="最多可输入25字" maxlength="25"></Input>
                        </FormItem>
                        <FormItem label="员工电话" prop="phone">
                            <Input v-model.trim="buildmodal.phone" class="itemsStyle" placeholder="请输入" maxlength="11"></Input>
                        </FormItem>
                        <FormItem label="身份证号" prop="cardId">
                            <Input v-model.trim="buildmodal.cardId"  class="itemsStyle"
                                   placeholder="请输入" :maxlength="18"  :minlength="18"></Input>
                        </FormItem>
                        <FormItem label="部门" prop="deptId">
                            <Select  v-model="buildmodal.deptId" class="itemsStyle" filterable  placeholder="请选择部门"  >
                                <Option v-for="item in maintainList" :key="item.id"  :value="item.id+''" >{{item.deptName}}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </div>
                <div slot="footer">
                    <Button type="primary" @click='addPersonBtn'>确认</Button>
                    <Button @click="distributionModal = false">取消</Button>
                </div>
            </Modal>

            <!-- 修改人员 -->
            <Modal v-model="editPersonModal"
                   width="500"
                   title="修改信息"
                   :mask-closable="false">
                <div>
                    <Form ref="editPersonRef" :model="editPersonForm"
                          :rules="editruleValidate" :label-width="130" class="channelBulid-form-back">
                        <FormItem label="员工名字" prop="name">
                            <Input v-model.trim="editPersonForm.name" class="itemsStyle" placeholder="最多可输入25字" maxlength="25"></Input>
                        </FormItem>
                        <FormItem label="员工电话" >
                            <Input v-model.trim="editPersonForm.phone" disabled="disabled" class="itemsStyle" placeholder="请输入" maxlength="11"></Input>
                        </FormItem>
                        <FormItem label="身份证号" >
                            <Input v-model.trim="editPersonForm.cardId" disabled="disabled" class="itemsStyle"
                                   placeholder="请输入" maxlength="18"  minlength="18"></Input>
                        </FormItem>
                        <FormItem label="部门" prop="deptId">
                            <Select  v-model="editPersonForm.deptId" class="itemsStyle" filterable  placeholder="请选择部门"  >
                                <Option v-for="item in maintainList" :key="item.id"  :value="item.id+''" >{{item.deptName}}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </div>
                <div slot="footer">
                    <Button type="primary" @click='editPersonBtn'>确认</Button>
                    <Button @click="editPersonModal = false">取消</Button>
                </div>
            </Modal>

            <!-- 查询人员 -->
            <Modal v-model="personDetailModal"
                   width="500"
                   title="员工信息"
                   :mask-closable="false">
                <div>
                    <Form
                           :label-width="130" class="channelBulid-form-back">
                        <FormItem label="员工名字" prop="name">
                            <Input v-model.trim="detailPersonForm.name" class="itemsStyle" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="员工电话" >
                            <Input v-model.trim="detailPersonForm.phone" disabled="disabled" class="itemsStyle"  ></Input>
                        </FormItem>
                        <FormItem label="身份证" >
                            <Input v-model.trim="detailPersonForm.cardId" disabled="disabled" class="itemsStyle"  ></Input>
                        </FormItem>
                        <FormItem label="部门" prop="deptId">
                            <Input v-model.trim="detailPersonForm.deptName" disabled="disabled" class="itemsStyle"  ></Input>
                        </FormItem>
                    </Form>
                </div>
                <div slot="footer">
                    <Button type="primary" @click="personDetailModal = false">确认</Button>
                </div>
            </Modal>
        </Card>
    </div>
</template>

<script>

	import systemApi from '../../api/api'
	import fetchList from '../../api/fetchList'
	import dateFormat from '../../tool/date'
	import codeManage from '../../api/statusCodeManage';
	import validator from '../../tool/validator';
	import Cookies from 'js-cookie';
	

	export default {
		name: 'personList',
		data() {
			return {
				distributionModal: false,//产品分配模态框
				loading: false,
                personDetailModal:false,
                detailPersonForm:{
                    name:'',
                    phone:'',
                    cardId:"",
                    deptName:''
                },
				formItem: {
                    name:'',
					maintainUserMblNo:'',
					maintainUserName:''
				},//查询表单
                buildmodal:{
                    name:null,
                    phone:null,
                    cardId:null,
                    deptId:null
                },

                editPersonModal:false,
                editPersonForm:{
				   id:0,
                   name:null,
                   phone:null,
                   cardId:null,
                   deptId:null
                },
				listStyle: {
					width: '350px',
					height: '300px'
				},
				columns: {
					url: 'allAPI.personnelList',
					cols: [
						{
							title: '序号',
                            type: 'index',
							align: 'center',
							width: 80
						},
						{
							title: '姓名',
							align: 'center',
							key: 'name',
							width: 200
						},
						{
							title: '电话号码',
							align: 'center',
							key: 'phone',
							width: 120
						},
                        {
                            title: '身份证号',
                            align: 'center',
                            key: 'cardId',
                            width: 180,
                            render:function (h,params) {
                                return validator.cardIDHide(params.row.cardId);
                            }
                        },
						{
							title: '部门',
							align: 'center',
							key: 'deptName',
							width: 150,

						},
						{
							title: '创建时间',
							align: 'center',
							key: 'modifyTime',
							width: 200,
                            render:function (h,params) {
                                return dateFormat(params.row.modifyTime,'YYYY-MM-DD 星期E HH:mm')
                            }
						},
						{
							title: ' '
						},
						{
							title: '操作',
							key: 'action',
							width: 150,
							fixed: 'right',
							align: 'center',
							render: (h, params) => {
								return h('div', [
									h('a', {
										style: {
											color: '#2d8cf0',
											marginRight: '13px'
										},
										on: {
											click: () => {
												this.deletePersonById(params.row.id);
											}
										}
									}, '删除'),
									h('a', {
										style: {
											color: '#2d8cf0',
											marginRight: '13px'
										},
										on: {
											click: () => {
												this.editChannel(params.row);
											}
										}
									}, '修改'),
                                    h('a', {
                                        style: {
                                            color: '#2d8cf0',
                                            marginRight: '13px'
                                        },
                                        on: {
                                            click: () => {
                                                this.personDetail(params.row);
                                            }
                                        }
                                    }, '查询')
								])
							}

						}
					]
				},

				defaultVal: {    //固定参数  初始化默认参数  page和rows 不需要传递
                    name:'',
					pageNo: 1,
                    pageSize: 20
				},
				filt: {},
                ruleValidate:{
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入正确的手机号', pattern: /^[1][3,4,5,7,8][0-9]{9}$/, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请输入正确的身份证号', pattern: /^\d{17}[\d|X|x]$/, trigger: 'blur'}
                     ],
                    deptId: [
                        {required: true, message: '请选择部门',  trigger: 'change'}
                    ]
                },
                editruleValidate:{
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    deptId: [
                        {required: true, message: '请选择部门',  trigger: 'change'}
                    ]
                },
				totalNumber: '',   // 更新查询结果 总条数
				totalNumber: 0, // 总数据条数
				pageLimitNum: 20, // 每页限制的条数
				currentPage: 1

			};

		},

		methods: {

			// 显示查询结果集总条数
			tableCall(par) {
				// 表格查询后的回调函数
				this.totalNumber = par;
			},
			changeLimitSize(pageSize) {
				// 每页显示条数的改变
				this.pageLimitNum = pageSize;
			},
			changePage(page) {
				// 当前页改变
				this.currentPage = page;
			},
            // 添加人员接口
            addPersonBtn(){
			    let _this = this;
                this.$refs.addPersonRef.validate((valid) => {
                    if (valid) {
                        systemApi.allAPI.addPerson(_this.buildmodal).then(
                            res => {
                                if (res.code === 0) {
                                    this.distributionModal = false;
                                    this.$Message.success('添加成功');
                                    this.filt = this.defaultVal;
                                }else if (res.code === 1){
                                    this.$Message.warning(res.msg);
                                }
                            },
                            err => {
                                this.distributionModal = false;
                                codeManage.showTipOfStatuCode(err, this);
                        })
                    }else{

                    }

                })
            },
            // 编辑人员接口
            editPersonBtn(){
                let _this = this;
                this.$refs.editPersonRef.validate((valid) => {
                    if (valid) {

                        let _par = {};
                        _par.id = _this.editPersonForm.id;
                        _par.name = _this.editPersonForm.name;
                        _par.deptId = _this.editPersonForm.deptId;

                        systemApi.allAPI.editPerson(_par).then(
                            res => {
                                if (res.code === 0) {

                                    this.editPersonModal = false;
                                    this.$Message.success('编辑成功');
                                    this.filt = this.defaultVal;
                                }
                            },
                            err => {
                                this.editPersonModal = false;
                                codeManage.showTipOfStatuCode(err, this);
                            })
                    }else{

                    }

                })
            },
			//新建渠道
			buildChannel() {
                this.$refs.addPersonRef.resetFields();
                this.distributionModal = true;
			},
			//查看渠道详情
            deletePersonById(id) {
                systemApi.allAPI.deletePerson({id:id}).then(
                    res => {
                        if (res.code == 0) {
                            this.$Message.success('删除成功');
                            this.filt = {...this.defaultVal};
                        }else{
                            this.$Message.error('删除失败');
                        }
                    },
                    err => {
                        codeManage.showTipOfStatuCode(err, this);
                    })
			},
			//编辑人员初始化
			editChannel(item) {
                this.editPersonModal = true;
                this.$refs.editPersonRef.resetFields();
                this.editPersonForm = {...item};
                this.editPersonForm.deptId = item.deptId+"";
			},
            //查询人员初始化
            personDetail(item) {
                debugger
                this.personDetailModal = true;
                this.$refs.editPersonRef.resetFields();
                this.detailPersonForm = {...item};
//                this.editPersonForm.deptInfo = item.deptId+"";
            },
			//渠道查询
			channelSearch() {
	
				let _searchName = this.formItem.name;
				this.currentPage = 1;
				this.defaultVal = {name: _searchName};
				let obj = validator.formatReq(this.defaultVal);
				this.defaultVal ={...obj} ;
                this.filt = {...obj};

            },
            intPage(){
			    systemApi.allAPI.getDepList({}).then(
			        res =>{
                        if(res.code == 0){
                            this.maintainList = res.data;
                        }else{

                        }
                    },
                    error => {

                    }
                )
            }
		},
        created(){
		    this.intPage();
        }
	}
</script>


<style lang="less">

    @import "../../styles/main";

    .channel-list {

        padding: 16px;
        .itemsStyle{
            width: 250px;
        }
        .search-form {
            padding: 10px 0;
            height: 40px;
            background: white;

        }
        .search-result {
            padding: 0px 0;
        }

    }

    .channel-ivu-transfer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 35px;
        margin-bottom: 35px;
        .ivu-modal {
            top: 0;
        }
    }


</style>